<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.js"></script>
		<script src="js/react-dom.js"></script>
		<script src="js/browser.min.js"></script>
		<style>
			.a{
				list-style: none;
				font-size: 30px;
				/*color: darkred;*/
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		
		
		<script type="text/babel">
			
			var Shuxing = React.createClass({
				getDefaultProps: function(){
					return ({
						cnt: ['这', '是', '默', '认', '值']
					})
				},
				
				
				createLis: function(){
					var arr = this.props.cnt;
					return (arr.map(function(value, index){
						return (<li key={index}>{value}</li>)
					}))
				},
				
				
				
				render: function(){
					{/*这里是html标签的属性，下面渲染部分的是react的虚拟DOM的属性*/}
					return (
						<ul className="a" style={{color: 'white', backgroundColor: 'black'}}>{this.createLis()}</ul>
					)
				}
			});
			
			ReactDOM.render(<Shuxing cnt={['aaa', 'bbb', 'ccc']}></Shuxing>, document.getElementById('box1'))
			ReactDOM.render(<Shuxing cnt={['这', '实', '验', '很', '成', '功']}></Shuxing>, document.getElementById('box2'));
			ReactDOM.render(<Shuxing></Shuxing>, document.getElementById('box3'));
			
		
		</script>
	</body>
</html>
